<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
</head>


<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><input type="text" v-model="msg"></p>
        <p v-on:click="countAdd(100)">count -- {{count}}</p>
        <p>word === {{word}}</p>
        <p>
            <input type="text" v-bind:value="word" v-on:input="changeWord">
        </p>
        <label for="check">
            选择打开关闭 <input type="checkbox" id="check" v-model="flag">
        </label>
        <div v-if="flag">
            <p>{{text}}</p>
            <img v-bind:src="imgSrc" alt="" width="200" height="200">
        </div>
        <div v-else>
            Are you OK OK?
        </div>
        <button v-on:click="changeFlag()">点击切换{{flag?'隐藏':"显示"}}</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "wuhan2103-daydayup",
            count: 2103,
            word: "Vue is so easy",
            text: "Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系",
            imgSrc: "http://47.104.209.44/base/img/4.jpg",
            name: "千锋教育",
            title: "欢迎来报名HTML5",
            flag: !!1,
            list: ['Vue', 'React', 'Angular', 'TypeScript', 'Webpack', 'Node'],
            tag: '<h2>千锋-前端培训第一强</h2>',
            message: '越努力，越幸运...'
        },
        methods: {
            changeFlag() {
                this.flag = !this.flag
            },
            countAdd(n) {
                this.count += n
            },
            changeWord(e) {
                this.word = e.target.value
            }
        }
    })


</script>
<!-- 
        开发环境 针对于 开发者 development
        生产环境 针对于 客户   production
        Freamwork  Vue = React + Angular
        Vue ===>  view(发音) 侧重视图层
        Vue 通过实例化 Vue 这个构造函数  实现vue 框架的所有功能
        vm  得到的实例化对象
        el  属性  documnet.querySelector(el);  说明Vue的作用范围
        会将app 里面所有的 DOM 渲染 成 虚拟DOM(？) 存储在 内存中 
        data Vue  需要初始化的数据   最常见的属性
        {{}}  最普遍的模板标记标签   双大括号语法  插值表达式
        核心功能   允许采用简洁的模板语法来声明式地将数据渲染进  Dom 的系统
        声明式  直接在 Html 书写   a
        编程式  直接在 javascript 书写  location.href
        响应式  reaction  数据被修改之后    页面里面随之跟着里面更新（vue提供自动响应式系统）

        强大的指令功能   v- 代替你进行DOM 操作  Attribute
        v-bind 绑定vue标签  或者 组件的 属性  attribute  v-bind:src  v-bind:title  绑定动态的属性
        静态属性  永远不改变  不是变量
        动态属性  接收是变量  （v-bind）
        v-if/v-show 条件渲染 控制显示隐藏
        v-on 绑定事件  v-on:click  v-on:chage v-on:keydown 
        v-for 循环  循环对象或数组  
        v-model  只能绑定在输入框  实现数据双向绑定 （view视图 + model 数据模型）
        当你修改  页面的时候 v-model 自动去更新数据层
        当你修改  数据的时候  v-model 自动去更新视图层

        v-text textContent  只接收文本
        v-html innerHtml    文本和html标签
        v-once read-only 
        methods vue 属性  接收方法

        组件化  组件系统是  Vue 的另一个重要概念
        允许我们使用小型、独立和通常可复用的组件构建大型应用
    
    -->

</html>